<template>
  <el-card>
    <el-card v-for="resource in resourceList" :key="resource.id" shadow="never">
      <div slot="header">
        <el-checkbox
          :indeterminate="resource.isIndeterminate"
          v-model="resource.checkAll"
          @change="handleCheckAllChange(resource, $event)"
        >{{resource.name}}</el-checkbox>
      </div>
      <el-checkbox-group v-model="resource.checkedList" @change="handleCheckedCitiesChange(resource, $event)">
        <el-row>
          <el-col :span="8" style="padding: 8px 0;" v-for="item in resource.list" :key="item.id">
            <el-checkbox :label="item.id">{{item.name}}</el-checkbox>
          </el-col>
        </el-row>
      </el-checkbox-group>
    </el-card>
    <div style="text-align: center;margin-top:15px;">
      <el-button @click="resetChecked">清空</el-button>
      <el-button type="primary" @click="onSave">保存</el-button>
    </div>
  </el-card>
</template>

<script lang="ts">
import Vue from 'vue'
import { getAllCategory, getAll, allocateRoleResources } from '@/services/resource'

export default Vue.extend({
  name: 'RoleAllocResourceIndex',
  props: {
    roleId: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {
      resourceList: []
    }
  },
  created () {
    this.loadAllResourcesCategory()
  },
  methods: {
    async loadAllResourcesCategory () {
      const [categoryListRes, resourceListRes] = await Promise.all([getAllCategory(), getAll()])
      const categoryList = categoryListRes.data.data
      const resources = resourceListRes.data.data
      let list: any[] = []
      categoryList.forEach((category: any) => {
        const item = {
          ...category,
          list: [],
          checkedList: [],
          checkAll: false,
          isIndeterminate: false
        }
        resources.forEach((resource: any) => {
          if (resource.categoryId === category.id) {
            item.list.push({ ...resource })
          }
        })
        list = [...list, { ...item }]
      })
      list.sort((a, b) => a.id - b.id)
      this.resourceList = list as any
    },
    handleCheckAllChange (resource: any, val: any) {
      resource.checkedList = val ? resource.list.map((item: any) => item.id) : []
      resource.isIndeterminate = false
    },
    handleCheckedCitiesChange (resource: any, value: any) {
      const checkedCount = value.length
      resource.checkAll = checkedCount === resource.list.length
      resource.isIndeterminate = checkedCount > 0 && checkedCount < resource.list.length
    },
    resetChecked () {
      this.resourceList.forEach((item: any) => {
        item.checkedList = []
        item.checkAll = false
        item.isIndeterminate = false
      })
    },
    async onSave () {
      this.$confirm('是否分配资源?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const resourceIdList: any = []
        this.resourceList.forEach((resource: any) => {
          resourceIdList.push(...resource.checkedList)
        })
        await allocateRoleResources({
          roleId: this.roleId,
          resourceIdList
        })
        this.$message.success('操作成功')
        this.$router.back()
      }).catch(console.log)
    }
  }
})
</script>

<style lang="scss" scoped>
::v-deep .el-card__header {
  background-color: rgb(242, 246, 252) !important;
}
</style>
